<template>
  <div class="num-total">
    <div class="chart-container" ref="numTotalBox">
      <a-row
        class="h-100p"
        :gutter="16"
        style="margin-left: 0; margin-right: -16px"
      >
        <a-col
          v-for="(list, listIndex) of data"
          :key="listIndex"
          :xs="24"
          :sm="8"
        >
          <a-row :gutter="16" class="w-100p h-100p border-radius-4">
            <a-col
              class="total-number chart-box2"
              v-for="(item, key) in list"
              :key="key"
              :span="8"
              style="border-radius: 0"
            >
              <div class="number-box number">
                <count-to
                  :start-val="item.oldVal"
                  :end-val="item.newVal"
                  :duration="3000"
                />
                <span class="unit"> {{ item.unit }} </span>
              </div>
              <div class="title">{{ item.title }}</div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  nextTick,
  onMounted,
} from "vue";
import CountTo from "../countTo/index.vue";
import store from "../../../../store";
import common from "../../utils/common";

export default defineComponent({
  name: "EnergyNumTotal",
  components: { CountTo },
  setup() {
    const state = reactive({
      numTotalBox: null,
      itemWidth: "100px",
      data: [
        {
          day_lighting_en: {
            ...common.countToInit,
            title: "本日照明能耗",
            unit: "kw·h",
          },
          day_air_conditioner_en: {
            ...common.countToInit,
            title: "户均空调能耗",
            unit: "kw·h",
          },
          day_save_el: {
            ...common.countToInit,
            title: "本日节约用电",
            unit: "kw·h",
          },
        },
        {
          elevator_operating_m: {
            ...common.countToInit,
            title: "电梯运行里程",
            unit: "km",
          },
          passengers_num: {
            ...common.countToInit,
            title: "载人数量",
            unit: "人",
          },
          open_close_door_num: {
            ...common.countToInit,
            title: "开关门次数",
            unit: "次",
          },
        },
        {
          peak_waiting_time: {
            ...common.countToInit,
            title: "高峰等梯时间",
            unit: "分钟",
          },
          failures_num: {
            ...common.countToInit,
            title: "故障次数",
            unit: "次",
          },
          check_num: {
            ...common.countToInit,
            title: "检查次数",
            unit: "次",
          },
        },
      ],
    });

    watch(
      () => store.getters.centerControl.Device_topData,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Device_topData } = store.getters.centerControl;
      if (Device_topData) {
        for (let key in Device_topData) {
          let data =
            state.data[0][key] ||
            state.data[1][key] ||
            state.data[2][key] ||
            {};
          data.oldVal = data.newVal;
          data.newVal = Device_topData[key];
        }
      }
    };

    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.unit {
  font-size: 1.4rem;
  margin-left: 0.5rem;
}
</style>
